<template>
  <x-header class="custom-header" :class="{mHeader: fixtop}" :left-options="leftOptions"
    :title="title" :style="{backgroundColor: bgColor}">
    <img class="lximg" slot="overwrite-left" :src="leftImg" v-if="leftOptions.showBack" alt="" @click="handleBack">
    <!-- <span>{{leftOptions.backText}}</span> -->
    <template slot="right" ><slot name="right"></slot></template>
  </x-header>
</template>
<script>
export default {
  props: {
    title: {
      type: String
    },
    leftImg: {
      default: require('../assets/imgs/icon-back@2x.png')
    },
    bgColor: {
      default: '#D44743'
    },
    fixtop: {
      type: Boolean,
      default: true
    },
    preventBack: false, // 阻止返回上一页
    leftOptions: {
      type: Object,
      default: () => {
        return {
          showBack: true,
          backText: '返回',
          preventGoBack: false
        }
      }
    }
  },
  methods: {
    handleBack () {
      if (!this.preventBack) {
        this.$router.go(-1);
      } else {
        this.$emit('navback');
      }
    }
  }
}
</script>
<style lang="less">
  .vux-header.custom-header  {
    // background-color: #D44743;
    &.mHeader {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
    }
    .vux-header-title {
      font-weight: bold;
      font-size: 0.34rem;
      color: #fff;
    }
    .vux-header-left {
      left: 0;
      .lximg {
        width: 0.23rem;
        height: 0.4rem;
        padding: 0 0.3rem;
      }
    }
    .vux-header-right {
      .rximg {
        width: 0.37rem;
        height: 0.4rem;
      }
    }
  }
</style>
